<template>
    <div class="container">
        <van-nav-bar title="设备管理" left-arrow  @click-left="onClickLeft"/>
        <div class="content">
            <div class="header">
                <van-search v-model="searchValue" placeholder="搜索设备所在地" @search="onSearch"/>
                <van-radio-group v-model="checked" direction="horizontal" @change="radioChange">
                    <van-radio name="0">离线</van-radio>
                    <van-radio name="1">满仓</van-radio>
                </van-radio-group>
            </div>
            <div class="tipTwo" v-if="DeviceList.length == 0">暂无数据</div>
            <div class="footer" @scroll="scrollFun" v-else>
                <template v-for="item in DeviceList" :key="item.id">
                    <div class="item" @click="goDeviceDetails(item.id)">
                        <div class="top">
                            <p class="title">{{ item.address }}</p>
                            <p :style="{color:item.isStatus == 0 ? '#FF0000' : '#00B74F'}">{{ item.isStatus == 0 ? '离线' : '在线' }}</p>
                        </div>
                        <div class="bottom">
                            <div class="news">
                                <p>设备编号</p>
                                <p>{{ item.code }}</p>
                            </div>
                            <div class="news">
                                <p>实时重量</p>
                                <p>{{ item.nowWeight }}kg</p>
                            </div>
                            <div class="news">
                                <p>设备状态</p>
                                <p>{{ item.storageStatus == 0 ? '未满仓' : '满仓' }}</p>
                            </div>
                        </div>
                    </div>
                </template>
                <div class="tip" v-if="!tipFlag">数据加载完成</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import { 
    getDeviceList,
 } from '@/api/DeviceManage';
const router = useRouter()
// 点击左上角的返回
const onClickLeft = () => {
    router.push({
        path:'/HomePage'
    })
}
let DeviceList = ref([])//设备列表
let totalSize = ref(0)//总共的设备数量
let pageIndex = ref(1)//页码
let pageSize = ref(5)//页号
let code = ref('')//设备编号
let address = ref('')//地址
let tipFlag = ref(true)//数据加载完成的提示
let isStatus = ref(null)//设备状态
let storageStatus = ref(null)//仓储状态
let searchValue = ref('')//搜索框的值
const onSearch = val => { //搜索
    address.value = val
    pageIndex.value = 1
    tipFlag.value = true
    getDeviceListFun(
        ['pageIndex', pageIndex.value],
        ['pageSize', pageSize.value],
        ['code', code.value],
        ['address', address.value]
    )
}
let checked = ref('')//单选框
const radioChange = name => {
    tipFlag.value = true
    if(name == 0){
        isStatus.value = name
        DeviceList.value = []
        pageIndex.value = 1
        storageStatus.value = ''
        getDeviceListFun(
            ['pageIndex', pageIndex.value],
            ['pageSize', pageSize.value],
            ['code', code.value],
            ['address', address.value],
            ['isStatus', 0]
        )
    }else{
        storageStatus.value = name
        DeviceList.value = []
        pageIndex.value = 1
        isStatus.value = ''
        getDeviceListFun(
            ['pageIndex', pageIndex.value],
            ['pageSize', pageSize.value],
            ['code', code.value],
            ['address', address.value],
            ['storageStatus', Number(name)]
        )
    }
}
const getDeviceListFun = async (...entries) => { //获取设备列表
    const DeviceListData = {};
    entries.forEach(([key, value]) => {
        if (value !== undefined && value !== null && value !== '') {  
            DeviceListData[key] = value;
        }
    });
    try{
        const res = await getDeviceList(DeviceListData)
        if(res.data.code == 200){
            if (pageIndex.value == 1) {
                DeviceList.value = []
            }
            DeviceList.value = DeviceList.value.concat(res.data.dataset.list)
            totalSize.value = res.data.dataset.totalSize
        }
        pageIndex.value++
        if(pageIndex.value > Math.ceil(totalSize.value / pageSize.value)){
            tipFlag.value = false
        }
    }catch(error){}
}

const scrollFun = (e) => {//发生滚动
    const {scrollTop,clientHeight,scrollHeight}= e.target;
    if(scrollTop+clientHeight >= scrollHeight){
        if(tipFlag.value){
            const params = [
                ['pageIndex', pageIndex.value],
                ['pageSize', pageSize.value],
                ['code', code.value],
                ['address', searchValue.value || address.value]
            ];
            if (isStatus.value !== null && isStatus.value !== '') {
                params.push(['isStatus', Number(isStatus.value)]);
            }
            if (storageStatus.value !== null && storageStatus.value !== '') {
                params.push(['storageStatus', Number(storageStatus.value)]);
            }
            getDeviceListFun(...params);
        }
    }
}

const goDeviceDetails = (id) => { //点击设备查看设备详情
    router.push({
        path:'/DeviceDetails',
        query:{
            id:id
        }
    })
}

onMounted(() => {
    getDeviceListFun(
        ['pageIndex', pageIndex.value],
        ['pageSize', pageSize.value],
        ['code', code.value],
        ['address', address.value]
    )
})
</script>

<style lang="less" scoped>
.container{
    height:100vh; 
    background-color: #F9F9F9;
    :deep(.van-nav-bar .van-icon){
        color:#000
    }
    .content{
        width:100vw;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding:4em 2em;
        .header{
            display: flex;
            justify-content: space-between;
            .van-search{
                padding:0;
            }
            :deep(.van-search__field){
                background: #EBEBEB;
                border-radius: 2em;
                box-sizing: border-box;
                padding:0.1em 0.7em
            }
            :deep(.van-field__control){
                color:#616161;
            }
            :deep(.van-field__control)::placeholder{
                color:#616161;
            }
            :deep(.van-radio__label){
                font-size: 4em;
                margin:0
            }
            .van-radio--horizontal{
                margin-right:2em
            }
            .van-search__content{
                padding:0;
            }
            :deep(.van-search__content){
                padding:0
            }

        }
        .tipTwo{
            font-size: 4em;
            text-align: center;
            margin-top: 4em;
        }
        .footer{
            display: flex;
            flex-direction: column;
            margin-top:4em;
            height:80vh;
            overflow: auto;
            gap:3em;
            .item{
                box-sizing: border-box;
                padding:1em;
                background-color: #fff;
                font-size: 4em;
                border-radius: 1em;
                box-shadow: 1px 1px 4px #e2e2e2;
                .top{
                    display: flex;
                    justify-content: space-between;
                    box-sizing: border-box;
                    padding-bottom:1.3em;
                    border-bottom: 1px dashed #ccc;
                    .title{
                        font-weight: bold;
                        color:#1B56D4;
                        font-size: 1.1em;
                    }
                }
                .bottom{
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-top:1.3em;
                    gap:1em;
                    .news{
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
            .tip{
                font-size: 4em;
                text-align: center;
            }
        }
    }
}
</style>